<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      background-color: #f5f5f5;
    }

    .box {
      width: 500px;
      margin: 10px auto;
      min-height: 50px;
      background-color: #fff;
      box-shadow: 2px 2px 2px 2px #ccc;
    }

    h1 {
      text-align: center;
      height: 50px;
      line-height: 50px;
      color: brown;
    }

    input.abc {
      height: 30px;
      line-height: 50px;
      border: 1px solid #ccc;
      outline: none;
      font-size: 16px;
      width: 80%;
      margin: 10px auto;
    }

    ul {
      list-style: none;
    }

    /* 默认的li的样式 */
    /* li {} */

    li input.edit {
      display: none;
    }

    li span.del {
      display: none;
    }

    /* 勾选后的样式 */
    li.a span.content {
      text-decoration: line-through;
      color: #999;
    }

    /* 修改时的样式 */
    li.c input.chk {
      display: none;
    }

    li.c span.content {
      display: none;
    }

    li.c span.del {
      display: none;
    }

    li.c input.edit {
      display: block;
    }
  </style>
</head>

<body>


  <div class="box">

    <h1>待办事项</h1>

    <input type="text" class="abc">

    <ul>
      <!-- <li>
        <input type="checkbox" class="chk">
        <span class="content">真正的内容</span>
        <input type="text" class="edit">
        <span class="del">×</span>
      </li>
      <li class="a">
        <input type="checkbox" class="chk">
        <span class="content">真正的内容</span>
        <input type="text" class="edit">
        <span class="del">×</span>
      </li>
      <li class="c">
        <input type="checkbox" class="chk">
        <span class="content">真正的内容</span>
        <input type="text" class="edit">
        <span class="del">×</span>
      </li> -->
    </ul>

  </div>

  <script src="./js/jquery-3.6.0.js"></script>

  <script>
    // 1. 添加内容 (输入框，按回车，添加一个 li 元素)
    $('.abc').on('keyup', function (e) {
      if (e.keyCode === 13) {
        // 获取输入框的值
        let val = $(this).val();
        // 创建 li 
        let li = $(`
        <li>
          <input type="checkbox" class="chk">
          <span class="content">${val}</span>
          <input type="text" class="edit">
          <span class="del">×</span>
        </li>
        `);

        $('ul').append(li);
        $(this).val('');
      }
    });


    // 2. 点击复选框，切换类名
    $('ul').on('click', '.chk', function () {
      $(this).parent().toggleClass('a');
    })

    // 3. 删除
    // 3.1）鼠标移入 li ，显示 × 按钮，鼠标离开 隐藏 x 按钮
    $('ul').on('mouseenter', 'li', function () {
      $(this).children('.del').show();
    })

    $('ul').on('mouseleave', 'li', function () {
      $(this).children('.del').hide();
    })
    // 3.2）点击 × 按钮，移除当前的 li
    $('ul').on('click', '.del', function () {
      $(this).parent().remove();
    })

    // 4. 修改
    // 4.1）双击 li 的时候，给它加入 c 类
    $('ul').on('dblclick', 'li', function () {
      $(this).addClass('c');
    })

    // 4.2）输入框按回车，确定修改
    $('ul').on('keyup', '.edit', function (e) {
      if (e.keyCode === 13) {
        let newVal = $(this).val();
        $(this).parent().removeClass('c').children('.content').text(newVal);
      }
    })
  </script>

</body>

</html>